<template>
<div class="topclass">
    <w-header></w-header>
    <b-container>
        <el-row>
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-col :span="20">
                        <el-card shadow="always" class="card-class">
                            <el-form ref="form" :model="form" label-width="80px">
                                <el-form-item label="分类名称">
                                    <el-input v-model="form.title"></el-input>
                                </el-form-item>
                                <el-form-item label="分类内容">
                                    <el-input type="textarea" v-model="form.body"></el-input>
                                </el-form-item>
                                <el-form-item label="插入图片">
                                    <el-image style="width: 100px; height: 100px" :src="form.imgUrl" :preview-src-list="srcList">
                                    </el-image>
                                    <div></div>
                                    <b-form-file @change="upLoadAvatar" id="file-large" size="md" plain=""></b-form-file>
                                </el-form-item>

                                <el-form-item>
                                    <el-button type="primary" @click="Immediatelycreate">立即创建</el-button>
                                    <el-button>取消</el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </el-col>
                </div>
            </el-col>
        </el-row>
    </b-container>
</div>
</template>

<script>
export default {
    name: "topclass",
    data() {
        return {
            form: {
                title: "",
                body: "",
                imgUrl: "",
            },
            srcList: ['']
        }
    },
    methods: {
        Immediatelycreate() {
            if (this.form) {
                this.$artApi.isclassPost(this.form).then((res) => {
                    console.log(res);
                    if (res.ret == 200) {
                        this.$message({
                            message: '恭喜你，分类创建成功',
                            type: 'success'
                        })
                    } else {
                        if (res.title) {
                            this.$message({
                                message: res.title,
                                type: 'error',
                                offset: 60

                            })
                        }
                        if (res.body) {
                            this.$message({
                                message: res.body,
                                type: 'error',
                                offset: 120

                            })
                        }
                           if (res.imgUrl) {
                            this.$message({
                                message: res.imgUrl,
                                type: 'error',
                                offset: 180

                            })
                        }
                          if (res.cid) {
                            this.$message({
                                message: res.cid,
                                type: 'error',
                                offset: 240

                            })
                        }
                    }
                })
            }

        },
        upLoadAvatar(e) {
            console.dir(e.target.files[0]);
            let formData = new FormData();
            formData.append("file", e.target.files[0]);
            this.$axios
                .post("/common/filesUpload.php", {
                    data: formData,
                    processData: false,
                    contentType: false,
                })
                .then((res) => {
                    console.log(res);
                    this.form.imgUrl = res.data.url;
                    this.srcList[0] = res.data.url
                });
        },

    }
}
</script>

<style lang="scss">
.topclass {
    .card-class {
        margin-top: 200px;
    }

}
</style>
